<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start" *ngIf="showBackButton">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>登 录</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    <div text-center margin>
        <img src="./assets/icon/favicon.png" alt="logo">
    </div>
    <form (ngSubmit)="formSubmit()" #ngForm="ngForm" class="myForm">
        <ion-list lines="full">
            <ion-item>
                <ion-label>用户名</ion-label>
                <ion-input type="text" name="username" placeholder="请输入用户名" [(ngModel)]="model.username"
                           #username="ngModel" required validator-regular="legallyNamed" autocomplete="off"></ion-input>
            </ion-item>
            <div *ngIf="username.invalid && username.dirty" class="form-invalid-tip">
                <div *ngIf="username.errors.required">用户名是必填项</div>
                <div *ngIf="username.errors.legallyNamed">用户名只能是4到20位长度的英文或数字</div>
            </div>
            <ion-item>
                <ion-label>密码</ion-label>
                <ion-input type="password" name="password" placeholder="请输入密码"
                           [(ngModel)]="model.password"
                           #password="ngModel" required pattern=".{6,20}" autocomplete="off"></ion-input>
            </ion-item>
            <div *ngIf="password.invalid && password.dirty" class="form-invalid-tip">
                <div *ngIf="password.errors.required">密码是必填项</div>
                <div *ngIf="password.errors.pattern">密码长度为6到20位</div>
            </div>
        </ion-list>
        <ion-button expand="block" type="submit" [disabled]="!ngForm.valid||loading">登 录</ion-button>
        <ion-row text-center>
            <ion-col>
                <ion-button fill="clear" size="small" color="dark" (click)="findPassword()">找回密码？</ion-button>
            </ion-col>
            <ion-col>
                <ion-button fill="clear" size="small" color="dark" routerLink="/register">注册新用户</ion-button>
            </ion-col>
        </ion-row>
    </form>
</ion-content>
